<template lang="pug">
  #pc
    Banner/
    header
    section
      a(href="http://e.hengdianworld.com/VisitorTicketActivity.aspx?id=568" target="_blank"): img(class="center p1" src="../images/pc/p1.png")
      div.ll
        a(href="http://e.hengdianworld.com/VisitorTicketActivity.aspx?id=516" target="_blank"): img(class="p2" src="../images/pc/p2.png")
        a(href="http://e.hengdianworld.com/VisitorTicketActivity.aspx?id=487" target="_blank"): img(class="p3" src="../images/pc/p3.png")
      a(href="http://e.hengdianworld.com/visitorPackageActivity.aspx?id=11" target="_blank"): img(class="p4 center" src="../images/pc/p4.png")
      a(href="http://e.hengdianworld.com/visitorPackageActivity.aspx?id=53" target="_blank"): img(class="p5 center" src="../images/pc/p5.png")
      a(href="http://e.hengdianworld.com/VisitorTicketActivity.aspx?id=543" target="_blank"): img(class="p6 center" src="../images/pc/p6.png")
      img(class="w1 center" src="../images/pc/w1.png")
      img(class="w2 center" src="../images/pc/w2.png")

</template>

<script>
  import Banner from './Banner.vue'
  export default {

    name: 'Pc',

    data() {
      return {

      }
    },
    components: {
      Banner,
    }
  }
</script>

<style lang="scss" scoped>
  header{
    background: url(../images/pc/header.jpg) center no-repeat;
    background-size: cover;
    height: 739px;
    }
  section{
    position: relative;
    background: #de404f;
    height: 3072px;
    .center {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
    }
    .p1 {
      top: 41px;
    }
    .w1 {
      top: 575px;
    }
    .ll{
      position: absolute;
      top:675px;
      width: 1103px;
      left:50%;
      transform: translate(-50%,0);
      .p2, .p3 {
        float: left;
      }
      .p3 {
        margin-top: 13px;
      }
    }
    .w2 {
      top: 1277px;
    }
    .p4 {
      top: 1393px;
    }
    .p5 {
      top: 1770px;
    }
    .p6 {
      top: 2216px;
    }
    
  }
</style>